<template>
  <div class="orderMain">
    <dropDownVue @changeProductData="changeProductData"></dropDownVue>

    <div class="orderOption-button">
      <div class="button-item button-item-active">全部</div>
      <div class="button-item">待出行</div>
      <div class="button-item">待支付</div>
      <div class="button-item">退款/售后</div>
    </div>

   <van-empty description="您还没有订单哟~"  v-if="isEmpty"/>
    <prodectItem v-else :products="products"></prodectItem>
  </div>
</template>

<script>
import dropDownVue from "../../components/order/dropDown.vue";
import { onMounted } from "@vue/runtime-core";
import { useStore } from "vuex";
import { getUserOrder } from "../../api/service/order";
import { ref } from "vue";
import prodectItem from '../../components/order/productItem.vue'
import { reactive,toRefs } from "vue";
export default {
  components: {
    dropDownVue,
    prodectItem
  },
  setup() {
    const store = useStore();
    const isEmpty = ref(true)
    const state = reactive({
      products:[]
    })
    onMounted(() => {
      // console.log("order挂载", store.state.userId);
      getUserOrder({
        id: store.state.userId,
      }).then((res) => {
        console.log("orderList", res);
        if(res.data.length){
          isEmpty.value = false
        }
        store.commit("setUserOrderList", {
          orderList: res.data,
        });
        // 
        state.products = store.getters.filterProductList("全部订单")
      });
    });
    
      function  changeProductData(e) {
        // console.log('自组件派发的事件',e.text);
        state.products = store.getters.filterProductList(e.text)
        if(!state.products.length) {
          isEmpty.value = true
        }else{
           isEmpty.value = false
        }
      }
    return {
      isEmpty,
      changeProductData,
      ...toRefs(state)
    };
  },
};
</script>
<style scoped>
.orderMain {
  background: #f0f2f5;
  height: 100vh;
}
.orderOption-button {
  height: 50px;
  font-size: 12px;
  color: #9c9e9c;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 5px;
}
.button-item {
  height: 26px;
  flex: 1;
  margin: 4px;
  border-radius: 15px;
  background: #fff;
  text-align: center;
  line-height: 26px;
}
.button-item-active {
  background: rgb(191, 244, 247);
  color: rgb(0, 202, 216);
  font-weight: 600;
  /* border-color: rgb(0, 212, 227); */
  /* border-width: 0.5px; */
  border: 1px solid rgb(0, 212, 227);
}
</style>
